<template>
  <div>
    <el-col :span="4">
      <div class="tree">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini">
        </el-input>
        <el-tree @node-click="handlerClick" class="filter-tree" :data="pointData" :props="defaultProps"
          default-expand-all:filter-node-method="filterNode" ref="tree">
          <!-- :props="defaultProps" 是用于配置树形节点属性映射的关键设置。如何解析数据源（这里是 EngData）中的字段： -->
        </el-tree>
      </div>
    </el-col>
    <el-col :span="20">
      <div v-if="params.id" class="left">
        <div style="margin:5px 10px;">
          <div
            style="width: 100%;height: 28px;;background-color: #f4f4f4;border-radius: 10%;text-align: center;margin: 7px;">
            工程信息</div>
          <el-row style="margin: 30px 0px;">
            <el-col :span="12">工程编号：{{ monitorData.engineer.serial_number }}</el-col>
            <el-col :span="12">工程名称：{{ monitorData.engineer.name }}</el-col>
          </el-row>
          <el-row style="margin: 30px 0px;">
            <el-col :span="12">工程类型：{{ monitorData.engineer.type }}</el-col>
            <el-col :span="12">工程状态：{{ monitorData.engineer.status }}</el-col>
          </el-row>
          <el-row style="margin: 30px 0px;">
            <el-col :span="12">开始时间：{{ monitorData.engineer.begin_time }}</el-col>
            <el-col :span="12">结束时间：{{ monitorData.engineer.end_time }}</el-col>
          </el-row>
          <el-row style="margin: 30px 0px;">
            <el-col :span="12">地址：{{ monitorData.engineer.address }}</el-col>
          </el-row>
          <el-row style="margin: 30px 0px;">
            <el-col :span="12">工程负责人：{{ monitorData.engineer_id }}</el-col>
          </el-row>
          <div
            style="width: 100%;height: 28px;;background-color: #f4f4f4;border-radius: 10%;text-align: center;margin: 7px;">
            设备信息</div>
          <el-row style="margin: 30px 0px;">
            <el-col :span="12">工程设备：{{ monitorData.serial_number }}</el-col>
            <el-col :span="12">设备名称：{{ monitorData.name }}</el-col>
          </el-row>
          <el-row style="margin: 30px 0px;">
            <el-col :span="12">绑定状态:
              <span v-if="monitorData.bind_status == 1"
                style="font-size: 12px;background-color: aquamarine;border-radius: 5%;">已绑定</span>
              <span v-else style="font-size: 12px;background-color: red;border-radius: 5%;">未绑定</span>
            </el-col>
            <el-col :span="12">在线状态：
              <span v-if="monitorData.bind_status == 1"
                style="font-size: 12px;background-color: aquamarine;border-radius: 5%;">在线</span>
              <span v-else style="font-size: 12px;background-color: red;border-radius: 5%;">离线</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div v-else style="line-height: 50px;font-size: 20px;text-align: center;">请点击设备查看数据</div>
    </el-col>


  </div>
</template>

<script>
import { get } from '@/utils/request';
export default {
  data() {
    return {
      pointData: [],
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      params: {
        id: 0
      },
      monitorData: [],


    };
  },
  watch: {
    //监听用户输入框输入的值并进行过滤
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {},
  methods: {
    //点击节点触发
    handlerClick(val, node) {
      console.log(val, node, '点击事件')
      //判断点击的是设备 将设备id 工程id page pageSize传给后端
      if (!val.children) {
        this.params.id = val.id;
        this.getMonitor();
      }

    },
    async getPointData() {
      let res = await get('/engineer/findEngineerDeviceTree');
      console.log(res, 'history');
      this.pointData = res.data;
    },
    filterNode(value, data) {
      //data是树形结构的数据
      if (!value) return true;
      //value 输入框输入的值
      //返回就是包含输入框关键字的label(节点)
      return data.name.indexOf(value) !== -1;
    },
    // 获取工程数据方法 
    async getMonitor() {
      // let temp = {
      //   ...this.params

      // };
      let res = await get('/device/findDeviceDetail', this.params);
      console.log(res, '监控信息点');
      this.monitorData = res.data;
    },

  },
  created() {
    this.getPointData();
    // this.getMonitor();
  },
  mounted() { },
};
</script>
<style scoped>
.tree {
  height: calc(100vh - 60px);
  padding-right: 10px;
  border-right: 1px solid #ececec;

  padding-top: 10px;
  /* 增加顶部内边距，使搜索框与上方元素（若有）或顶部边框产生间隔 */
}

.engineer {
  border: 1px solid #ececec;
  background-color: #ececec;
  font-size: 15px;
  border: 25px;
}

.left {
  padding-left: 10px;
}

.equipment {
  border: 1px solid #ececec;
  background-color: #ececec;
  font-size: 15px;
}

.two {
  padding-left: 15px;
  padding-top: 5px;
}

.four {
  padding-left: 15px;
  padding-top: 5px;
}
</style>